<script lang="ts" setup>
import VideoPanel from '@/views/course/course-content/panels/video-panel.vue'
import LivePanel from '@/views/course/course-content/panels/live-panel.vue'
import { CourseItemType } from '@/api/course/item'

const emit = defineEmits<{
  (e: 'select', id: string): void
}>()

const dialogVisible = ref(false)
const dialogTitle = ref('选择内容')

const itemType = ref<CourseItemType>(CourseItemType.VIDEO)

const open = (type: CourseItemType) => {
  dialogVisible.value = true
  itemType.value = type
}
const close = () => {
  dialogVisible.value = false
}
defineExpose({ open, close })
</script>

<template>
  <Dialog :title="dialogTitle" v-model="dialogVisible" width="600">
    <video-panel
      v-if="itemType === CourseItemType.VIDEO"
      selectionMode
      @select="(id) => emit('select', id)"
    />
    <live-panel
      v-else-if="itemType === CourseItemType.LIVE"
      selectionMode
      @select="(id) => emit('select', id)"
    />
    <div v-else>暂不支持</div>
  </Dialog>
</template>
